import { defineConfig, loadEnv, UserConfig, ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import UnoCSS from "unocss/vite";
// 自动导入 vue 等的 相关的函数
import AutoImport from "unplugin-auto-import/vite";
// 自动导入第三方组件 和项目组件
import components from "unplugin-vue-components/vite";
import { VantResolver } from "@vant/auto-import-resolver";
// 路由自动导入和布局组件自动合成
import { resolve } from "path";
import Pages from "vite-plugin-pages";
import Layouts from "vite-plugin-vue-layouts";
// 导入 vite-plugin-html 根据环境变量修改标题
import { createHtmlPlugin } from "vite-plugin-html";
// 配置gzip压缩插件
import viteCompression from "vite-plugin-compression";
// 配置icon相关的
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import { FileSystemIconLoader } from "unplugin-icons/loaders";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
// 控制台标识符打印插件
import EnhanceLog from "vite-plugin-enhance-log";
// px-rem
import postcssPxtorem from "postcss-pxtorem";
//css 自动加前缀和polyfill
import postcssPresetEnv from "postcss-preset-env";
// 配置路径简写

const pathSrc = resolve(__dirname, "src");
const pathComp = resolve(__dirname, "src/components");
const pathAssets = resolve(__dirname, "src/assets");
const pathSvgIcon = resolve(__dirname, "src/assets/svg-icons");
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  // console.log(env);
  const { VITE_ICON_LOCAL_PREFIX, VITE_ICON_PREFIX } = env;
  /** 本地svg图标集合名称 */
  const collectionName = VITE_ICON_LOCAL_PREFIX.replace(
    `${VITE_ICON_PREFIX}-`,
    ""
  );

  return {
    base: env.VITE_PUBLIC_PATH,
    plugins: [
      vue(),
      UnoCSS(),
      AutoImport({
        // 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
        imports: ["vue", "vue-router", "pinia"],
        resolvers: [VantResolver(), IconsResolver({ prefix: "Icon" })],
        eslintrc: {
          enabled: true,
          globalsPropValue: true,
          filepath: "./.eslintrc-auto-import.json",
        },
        vueTemplate: true,
        // 配置文件生成位置(false:关闭自动生成)
        dts: mode === "development" ? "src/typings/auto-imports.d.ts" : false,
      }),
      components({
        resolvers: [
          VantResolver(), // 自动注册图标组件
          IconsResolver({
            // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false
            prefix: "Icon",
            // 指定collection，默认为全部
            // enabledCollections: [],
          }),
        ], //第三方组件库 例如 vant element 等
        dirs: ["src/components", "src/**/components"], //自定义的组件位置
        dts: mode === "development" ? "src/typings/components.d.ts" : false, //生成声明文件位置
      }),
      Pages({
        pagesDir: "src/views", //需要生成路由的文件目录，默认就是识别src下面的pages文件
        extensions: ["vue"],
        exclude: ["**/components/*.vue"], // 忽略的文件夹
        importMode: "async", // 是否是异步路由
      }),
      Layouts({
        // 如果是默认 layouts文件夹，默认 default.vue文件，则不需要配置
        layoutsDirs: "src/layouts", // 布局文件存放目录
        defaultLayout: "default", //对应 src/layouts/default.vue
      }),
      createHtmlPlugin({
        minify: true,
        /**
         * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
         * @default src/main.ts
         */
        entry: "/src/main.ts",
        /**
         * 需要注入 index.html ejs 模版的数据
         */
        inject: {
          data: {
            // 查找.env 等环境变量文件里面的VITE_PROJECT_TITLE，请以VITE_标识开头
            title: loadEnv(mode, process.cwd()).VITE_PROJECT_TITLE,
            injectScript: `<script src="/inject.js"></script> `,
            ENABLE_ERUDA: env.VITE_ENABLE_ERUDA || "false",
          },
        },
      }),
      viteCompression(),
      Icons({
        autoInstall: true, // 自动安装
        compiler: "vue3", // 支持vue3
        scale: 1, // 图标大小
        defaultClass: "inline-block", // 插入icon的类名
        defaultStyle: "marginTop:-0.1875em", // 插入icon的样式
        customCollections: {
          [collectionName]: FileSystemIconLoader(pathSvgIcon, (svg) =>
            svg.replace(/^<svg\s/, '<svg width="1em" height="1em" ')
          ),
        },
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(pathSvgIcon)],
        // 指定symbolId格式
        symbolId: `${VITE_ICON_LOCAL_PREFIX}-[name]`,
      }),
      EnhanceLog({
        splitBy: "\n",
        preTip: "🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡",
        enableFileName: true,
        endLine: true,
      }),
    ],
    resolve: {
      alias: {
        "@": pathSrc,
        comp: pathComp,
        // 配置图片要这样引用也可以自定义方法引入图片静态资源
        assets: pathAssets,
      },
    },
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 定义全局 SCSS 变量
        scss: {
          javascriptEnabled: true,
          additionalData: `
            @use "@/styles/variables.scss" as *;
          `,
        },
      },
      postcss: {
        plugins: [
          postcssPresetEnv(),
          postcssPxtorem({
            rootValue: 16,
            propList: ["*"],
            unitPrecision: 6,
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
          }),
        ],
      },
    },
    // 构建配置
    build: {
      chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
      minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
      terserOptions: {
        compress: {
          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
          drop_console: true, // 生产环境去除 console
          drop_debugger: true, // 生产环境去除 debugger
        },
        format: {
          comments: true, // 删除注释
        },
      },
      rollupOptions: {
        output: {
          // manualChunks: {
          //   "vue-i18n": ["vue-i18n"],
          // },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: "js/[name].[hash].js",
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: "js/[name].[hash].js",
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: (assetInfo: any) => {
            const info = assetInfo.name.split(".");
            let extType = info[info.length - 1];
            // console.log('文件信息', assetInfo.name)
            if (
              /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
            ) {
              extType = "media";
            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
              extType = "img";
            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
              extType = "fonts";
            }
            return `${extType}/[name].[hash].[ext]`;
          },
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return "vendors"; //所有的第三方包汇总
            }
          },
        },
        plugins: [
          viteCompression({
            verbose: true, // 是否在控制台中输出压缩结果
            disable: false,
            threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
            algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
            ext: ".gz", // 压缩后的文件扩展名，不配置默认为 .gz
            deleteOriginFile: false, // 源文件压缩后是否删除(看压缩后的效果，请设置为true)
          }),
        ],
      },
    },
  };
});
